<template>
  <!-- 查询 -->
  <div class="app-container">
    <el-form
      :model="form"
      ref="form"
      label-width="0"
      status-icon
      :inline-message="true"
      v-loading = 'loading'
    >
      <GridContainer style="margin-top: -10px" column="repeat(4, 1fr)">
        <GridCell v-if="this.zdPointInfo.length >0" :column="4">
          <h2 style="font-weight: 700; letter-spacing: 8px;">
            库位信息展示
          </h2>
        </GridCell>

        <div v-for="(item, index) in this.zdPointInfo" :key="index">
          <GridCell>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>{{ getWarehouseNumber(item.storageLocationType) }}</span>
                <el-button :disabled="item.storageLocationStatus == '2'"
                           style="float: right; padding: 3px 0" type="text" @click="openCkDetailInfo(item)"
                >
                  详情
                </el-button>
              </div>
              <div class="text item" style="height: 120px">
                <div>
                <span v-if="item.storageLocationStatus == '1'" style="margin-top: 35px"
                      class="el-tag el-tag--warning el-tag--medium el-tag--light"
                >
                  使用中
                </span>
                </div>
                <div v-if="item.storageLocationStatus == '1'" style="margin-top: 15px">
                  {{ '乘客:' + item.nickName + '；' + '航班号:' + item.flightNo }}
                </div>
                <span v-if="item.storageLocationStatus == '2'" style="margin-top: 45px;"
                      class="el-tag el-tag--success el-tag--medium el-tag--light"
                >
                闲置
               </span>
              </div>
            </el-card>
          </GridCell>
        </div>
      </GridContainer>
    </el-form>

    <!--  详细信息  -->
    <el-dialog :visible.sync="open" width="500px" append-to-body>
      <el-descriptions style="margin-top: -35px" :title="title"  direction="vertical" :column="3" border>
        <el-descriptions-item label="乘客" >
          <el-tag size="small">{{this.ckDetailInfo.nickName}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="手机号" >
          <el-tag size="small">{{ this.ckDetailInfo.phonenumber}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="身份证号" >
          <el-tag size="small">{{ this.ckDetailInfo.idCard}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="航班号" >
          <el-tag size="small">{{ this.ckDetailInfo.flightNo}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="停靠点" >
          <el-tag size="small" style="color: green">{{ this.ckDetailInfo.boardingGate}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="起飞时间" >
          <el-tag size="small" style="color: red">{{this.ckDetailInfo.takeOffTime}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="托盘编号" >
          <el-tag size="small">{{ this.ckDetailInfo.trayNo}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="行李重量(kg)" >
          <el-tag size="small">{{ this.cxXlCzAjInfo.zjtyXlZl}}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>

</template>

<script>
import { listArriveEarlyStorage } from '@/api/arriveEarly/arriveEarlyStorage'
import GridContainer from '@/components/GridLayout/GridContainer.vue'
import GridCell from '@/components/GridLayout/GridCell.vue'
import { getCkxlCzAjInfo} from "@/api/ckxl/xl";

export default {
  name: 'BoardGate',
  dicts: ['board_gate_type'],
  components: {
    GridContainer,
    GridCell
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      form:{
      },
      // 早到仓库信息
      zdPointInfo:[],
      open:false,
      title:'',
      // 乘客详细信息
      ckDetailInfo:{},
      cxXlCzAjInfo:{},
    }
  },
  created() {
    this.getList()
  },
  computed: {},
  methods: {

    /** 查询登机口列表 */
    getList() {
      this.zdPointInfo = [];
      this.loading = true
      listArriveEarlyStorage().then(response => {
        this.zdPointInfo = response.data;
        this.loading = false
      })
    },

    //打开乘客详细信息
    openCkDetailInfo(item) {
      this.open = true
      this.ckDetailInfo = item;
      this.title = this.getWarehouseNumber(item.storageLocationType)
      this.getCkCzAjInfo(item);
    },

    //获取仓库编号
    getWarehouseNumber(val){
      if(val == 1){
        return "一号库位";
      }else if(val == 2){
        return "二号库位";
      }else if(val == 3){
        return "三号库位";
      }else if(val == 4){
        return "四号库位";
      }else if(val == 5){
        return "五号库位";
      }else if(val == 6){
        return "六号库位";
      }else if(val == 7){
        return "七号库位";
      }else if(val == 8){
        return "八号库位";
      }else if(val == 9){
        return "九号库位";
      }else if(val == 10){
        return "十号库位";
      }else if(val == 11){
        return "十一号库位";
      }else if(val == 12){
        return "十二号库位";
      }
    },

    /** 查询乘客行李称重-安检信息 */
    getCkCzAjInfo(data) {
      const params = {
        passengerName: data.nickName, passengerIdCard: data.idCard
      }
      getCkxlCzAjInfo(params).then(response => {
        if(response.data != null){
          this.cxXlCzAjInfo = response.data;
        }
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  margin-top: 5px;
  margin-bottom: 5px;
}

::v-deep .el-button--medium {
  padding: 10px 20px;
  font-size: 12px;
  border-radius: 4px;
}

::v-deep .el-descriptions__title {
  font-size: 14px;
  font-weight: bold;
}

::v-deep .el-loading-spinner {
  top: 50%;
  margin-top: 21px;
  width: 100%;
  text-align: center;
  position: absolute;
}

</style>
